<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="http://d3js.org/d3.v2.js"></script>
  <script>
    <%=json_str%>
  </script>


  <style type="text/css">
      body {
          overflow: hidden;
          margin: 0;
          font-size: 14px;
          font-family: "Helvetica Neue", Helvetica;
      }

      #chart, #header, #footer {
          position: absolute;
          top: 0;
      }

      #header, #footer {
          z-index: 1;
          display: block;
          font-size: 36px;
          font-weight: 300;
          text-shadow: 0 1px 0 #fff;
      }

      #header.inverted, #footer.inverted {
          color: #fff;
          text-shadow: 0 1px 4px #000;
      }

      #header {
          top: 80px;
          left: 140px;
          width: 1000px;
      }

      #footer {
          top: 680px;
          right: 140px;
          text-align: right;
      }

      rect {
          fill: none;
          pointer-events: all;
      }

      pre {
          font-size: 18px;
      }

      line {
          stroke: #000;
          stroke-width: 1.5px;
      }

      .string, .regexp {
          color: #f39;
      }

      .keyword {
          color: #00c;
      }

      .comment {
          color: #777;
          font-style: oblique;
      }

      .number {
          color: #369;
      }

      .class, .special {
          color: #1181B8;
      }

      a:link, a:visited {
          color: #000;
          text-decoration: none;
      }

      a:hover {
          color: #666;
      }

      .hint {
          position: absolute;
          right: 0;
          width: 1280px;
          font-size: 12px;
          color: #999;
      }

      .chart {
          display: block;
          margin: auto;
          margin-top: 60px;
          font-size: 11px;
      }

      rect {
          stroke: #eee;
          fill: #aaa;
          fill-opacity: .8;
      }

      rect.parent {
          cursor: pointer;
          fill: steelblue;
      }

      text {
          pointer-events: none;
      }

  </style>
</head>
<body>
<div id="body">
  <div id="footer">
    d3.layout.partition
    <div class="hint">click or option-click to descend or ascend</div>
  </div>
</div>
<script type="text/javascript">

    var w = 1120,
            h = 600,
            x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]);

    var vis = d3.select("#body").append("div")
            .attr("class", "chart")
            .style("width", w + "px")
            .style("height", h + "px")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h);

    var partition = d3.layout.partition()
            .value(function (d) { return d.size; });

    root = data;
    var g = vis.selectAll("g")
            .data(partition.nodes(root))
            .enter().append("svg:g")
            .attr("transform", function (d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
            .on("click", click);

    var kx = w / root.dx,
            ky = h / 1;

    g.append("svg:rect")
            .attr("width", root.dy * kx)
            .attr("height", function (d) { return d.dx * ky; })
            .attr("class", function (d) { return d.children ? "parent" : "child"; });

    g.append("svg:text")
            .attr("transform", transform)
            .attr("dy", ".35em")
            .style("opacity", function (d) { return d.dx * ky > 12 ? 1 : 0; })
            .text(function (d) { return d.name; })

    d3.select(window)
            .on("click", function () { click(root); })

    function click(d) {
        if (!d.children) return;

        kx = (d.y ? w - 40 : w) / (1 - d.y);
        ky = h / d.dx;
        x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
        y.domain([d.x, d.x + d.dx]);

        var t = g.transition()
                .duration(d3.event.altKey ? 7500 : 750)
                .attr("transform", function (d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });

        t.select("rect")
                .attr("width", d.dy * kx)
                .attr("height", function (d) { return d.dx * ky; });

        t.select("text")
                .attr("transform", transform)
                .style("opacity", function (d) { return d.dx * ky > 12 ? 1 : 0; });

        d3.event.stopPropagation();
    }

    function transform(d) {
        return "translate(8," + d.dx * ky / 2 + ")";
    }

</script>
</body>
</html>
